<template>
  <div>
    <div class="queBox">
      <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="12" style="width:400px;">
          <!-- 搜索 -->
          <div class="search">
              <el-input placeholder="请输入内容" v-model="queryInfo.query" @clear="getUserList">
                <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
              </el-input>
            </div>

        </el-col>
        <el-col :span="9" style="width:300px;margin-left:100px;">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-row>
      <!-- 用药问答 表格 -->
      <div class="useQForm">
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="question"
              label="问题"
              width="180">
            </el-table-column>
            <el-table-column
              prop="asker"
              label="提问用户"
              width="180">
            </el-table-column>
            <el-table-column
              prop="askTime"
              label="提问时间"
            >
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="180">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看问题详情</el-button>
              <el-button type="text" size="small" @click="answer">写回答</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
    </el-form>
    </div>
     <!-- 分页 -->
     <div class="pagniation">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size=this.size layout="total, prev, pager, next" :total="this.tableData.length" style="float:right;margin-right:150px;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getXmedicineList} from '../../../api'
import lodash from 'lodash'
  export default {
    data() {
      return {
        form: {
          name: '',
        },
        tableData:[],
        array:[],
        queryInfo: {
        query: '',
         },
         // 分页
      currentPage1: 1,
      size: 5,
      }
    },
    // 搜索
    getUserList() {
      let search = this.queryInfo.query
      this.tableData2 = this.tableData.filter((item) => {
        // total = this.tableData2.length
        console.log(this.size)
        return Object.keys(item).some(function (key) {
          return String(item[key]).toLowerCase().indexOf(search) > -1
        })
      })
    },
    created() {
      getXmedicineList().then(res => {
        console.log(res)
        this.tableData = res.data
        this.array = res.data
        this.tableData2 = this.tableData.slice((this.currentPage1 - 1) * this.size, this.currentPage1 * this.size)
      })
    },
    methods: {
      que() {
          getXmedicineList().then(res => {
          console.log(res)
          this.tableData = res.data
          this.array = res.data
          this.tableData2 = this.tableData.slice((this.currentPage1 - 1) * this.size, this.currentPage1 * this.size)
        })
      },
      handleClick(row) {
        console.log(row);
        this.$router.push('/questionDetail')
      },
      answer() {
        this.$router.push('/answerDetail')
      },
      searchText() {
        let that = this
        let ask = this.array.filter(function (obj) {
          return obj.asker == that.form.name    // 提问者
        })
        if(ask.length != 0){
          this.tableData = ask
        }else if(this.form.name == ""){
          this.tableData = this.array
        }else{
          this.tableData = this.array
          alert('没有对应信息')
          }
        },
        // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.size = val
      // this.fn()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage1 = val
      this.tableData2 = this.tableData.slice((this.currentPage1 - 1) * this.size, this.currentPage1 * this.size)
    },
    }
  }
</script>

<style lang="scss" scoped>
.queBox {
  width:1000px;
  margin:20px 30px;
  .useQForm {
  width:1000px;
  margin-top:50px;
  }
}


</style>